<template>
  <div id="course">
    <c-title :hide="false" text="搜索"></c-title>
    <div class="box01">
      <div class="Search-box" :style="{ width: (this.fun.getPhoneEnv() == 3 ? '375px' : '100%') }">
        <div class="search">
          <i class="iconfont icon-sousuo1"></i>
          <input type="text" v-model="searchVal" placeholder="请输入你感兴趣的课程/讲师" @keypress="enterSearch">
        </div>
      </div>
      <ul class="screen" :style="{ width: (this.fun.getPhoneEnv() == 3 ? '375px' : '100%') }">
        <li class="whole" :class="[!filter_order ? 'activeColor' : '']" @click="getDataBth('')">综合</li>
        <li class="sales_volume" @click="getDataBth('sales')">
          <div class="left"
            :class="[(filter_order === 'sales_asc' || filter_order === 'sales_desc') ? 'activeColor' : '']">销量</div>
            <div class="iconfff" style="margin-left:0.3125rem">
              <div  :class="filter_order=='sales_asc'?'iconfff-top-current':'iconfff-top' "></div>
              <div  :class="filter_order=='sales_desc'?'iconfff-bottom-current':'iconfff-bottom' "></div>
            </div>
        </li>
        <li class="price" @click="getDataBth('price')">
          <div class="left"
            :class="[(filter_order === 'price_asc' || filter_order === 'price_desc') ? 'activeColor' : '']">价格</div>
            <div class="iconfff" style="margin-left:0.3125rem">
              <div  :class="filter_order=='price_asc'?'iconfff-top-current':'iconfff-top' "></div>
              <div  :class="filter_order=='price_desc'?'iconfff-bottom-current':'iconfff-bottom' "></div>
            </div>
        </li>
      </ul>
      <div class="full_video">
        <van-pull-refresh v-model="isLoading" @refresh="loadTop" success-text="刷新成功">
          <ul class="full_video_list">
            <li v-for="(item, i) in goodsList" :key='i' @click="goToDetail(item.goods_id)">
              <div class="full_video_left">
                <img :src="item.thumb" alt="">
              </div>
              <div class="full_video_right">
                <div>
                  <div class="video_name">{{ item.title }}</div>
                  <div class="left" >
                    <div style="display: flex;align-items: center;" v-if="item.has_one_lecturer">
                      <img style="margin-right: 0.25rem;width: 1.375rem;height: 1.375rem;border-radius: 100px;"
                        :src="item.has_one_lecturer && item.has_one_lecturer.has_one_member && item.has_one_lecturer.has_one_member.avatar"
                        alt="" />
                      <span>{{ item.has_one_lecturer.real_name }}</span>
                    </div>
                    <span>共{{ item.course_chapter_num }}节课</span>
                  </div>

                </div>
                <div class="full_video_bottom">
                  <div class="price" v-if="item.vip_level_status && item.vip_level_status.status == 1">
                    {{ $i18n.t('money') }} <span class="cost2">{{ item.vip_level_status.word }}</span>
                  </div>
                  <div class="price" v-else>
                      <span>{{ $i18n.t('money') }}</span>
                      <span style="font-size: 1.25rem;margin-left: 0.1563rem;font-weight:500;">{{ item.price }}</span>
                  </div>
                  <div class="buy">已购<span style="width:0.3125rem;display: inline-block;"></span>{{ item.total_sales }}
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
import course_search_controller from "./course_search_controller";
export default course_search_controller;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
.iconfff {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.iconfff .iconfff-top{
  width: 0;
  height: 0;
  border-top: 0.25rem solid transparent;
  border-right: 0.25rem solid transparent;
  border-left: 0.25rem solid transparent;
  border-bottom: 0.25rem solid #AAAAB3;
  margin-bottom: 0.0625rem;
}

.iconfff .iconfff-top-current{
  width: 0;
  height: 0;
  border-top: 0.25rem solid transparent;
  border-right: 0.25rem solid transparent;
  border-left: 0.25rem solid transparent;
  border-bottom: 0.25rem solid #FE5E56 !important;
  margin-bottom: 0.0625rem;
}
.iconfff .iconfff-bottom-current{
  width: 0;
  height: 0;
  border-top: 0.25rem solid #FE5E56 !important;
  border-right: 0.25rem solid transparent;
  border-left: 0.25rem solid transparent;
  border-bottom: 0.25rem solid transparent;
  margin-top: 0.0625rem;
  }
.iconfff .iconfff-bottom{
  width: 0;
  height: 0;
  border-top: 0.25rem solid  #AAAAB3;
  border-right: 0.25rem solid transparent;
  border-left: 0.25rem solid transparent;
  border-bottom: 0.25rem solid transparent;
  margin-top: 0.0625rem;
}

.Search-box {
  display: flex;
  background-color: #fff;
  padding: 1rem 0.75rem 0;

  .icon-sousuo {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    height: 100%;
    color: #666;
  }


  .search {
    position: relative;
    width: 100%;
    height: 1.75rem;
    display: flex;
    color: #999999;
    align-items: center;
    background: #F6F6F6;
    border-radius: 1.0938rem;
    padding: 0 0.75rem;
    box-sizing: border-box;
  }

  input {
    border: none;
    width: 100%;
    height: 1.75rem;
    line-height: 1.75rem;
    border-radius: 0.9375rem;
    padding: 0 1.125rem 0 0.3125rem;
    background-color: #fafafa;
  }
}

.screen {
  display: flex;
  align-items: center;
  background: #fff;

  li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin-top: 1.4375rem;
    margin-bottom: 0.969rem;
    line-height: 0.844rem;
    height: 0.844rem;
    font-size: 0.875rem;
    color: #00001C;

    .right {
      padding-left: 0.344rem;
      display: flex;
      align-items: center;
      flex-direction: column;

      i {
        line-height: 0.5rem;
        height: 0.5rem;
        font-size: 0.4rem;
      }
    }
  }


  .activeColor {
    color: #FE5E56;
  }
}

.full_video {
  background: #fff;
  margin-top: 0.75rem;

  .full_video_list {
    margin: 0.75rem  0.75rem 0;

    li {
      padding-bottom: 0.75rem;
      display: flex;

      .full_video_left {
        width: 6.281rem;
        height: 6.281rem;
        margin-right: 0.75rem;

        img {
          width: 100%;
          height: 100%;
          border-radius: 0.3125rem;
        }
      }

      .full_video_right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .video_name {
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .left {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 0.5rem 0;
          color: #4B6AA7;
          height: 1.625rem;
          padding-left: 0.375rem;
          padding-right: 0.75rem;
          font-size: 0.75rem;
          box-sizing: border-box;
          z-index: 2;
        }

        .left::after {
          position: absolute;
          content: "";
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          z-index: 1;
          background: #4B6AA7;
          opacity: 0.05;
        }

        .full_video_bottom {
          display: flex;
          align-items: flex-end;
          text-align: left;
          .buy {
            font-size: 0.75rem;
            color: #999999;
            margin-left: 0.5rem;
          }

          .price {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 0.75rem;
            color: #F15353;
            .cost2 {
              color: #ccc;
              font-size: 0.75rem;
              padding-left: 0.4rem;
            }
          }
        }
      }
    }
  }

  .video_more {
    font-size: 0.799rem;
    line-height: 0.938rem;
    height: 0.938rem;
    color: #999;
    padding-bottom: 1.531rem;
  }
}

li {
  list-style: none;
}



.Recommend,
.Hot,
.Newest {
  background-color: white;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

.touxiang {
  width: 5rem;
  height: 5rem;
  background-color: green;
  float: left;
}

.content {
  padding-top: 0.625rem;
}

.title {
  width: calc(100% - 6.75rem);
  float: left;
  text-align: left;
  margin-left: 0.75rem;
  padding-right: 0.875rem;
}

.title02 {
  color: #999;
  font-size: 12px;
  margin-bottom: 0.125rem;
}

.title01 {
  margin-bottom: 0.5rem;
  font-size: 15px;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.lecturer {
  float: left;
  color: #999;
  font-size: 12px;
}

.cost {
  float: right;
  color: #f15353;
  line-height: 1rem;
  font-size: 14px;
}

.cost1 {
  font-size: 0.75rem;
  background: #f15353;
  color: white;
  padding: 0.2rem 0.5rem;
  border-top-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

#course {
  .course {
    margin-top: 2.5rem;
  }
}</style>
